<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchList">
          <a-row :gutter="48">
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="搜索">
                <a-input v-model="queryParam.phone" placeholder="请输入ID/名称" allowClear />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="发放状态">
                <a-select v-model="queryParam.status" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option :value="item.value" v-for="item of sendStatusList" :key="item.value">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="发放类型">
                <a-select v-model="queryParam.type" placeholder="请选择">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option :value="0">自动发券</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="创建时间" has-feedback>
                <a-range-picker style="width: 100%" showToday valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" v-model="queryParam.regTime" />
              </a-form-item>
            </a-col>
            <a-col :xxl="24" :xl="16" :md="24" :sm="24">
              <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
                <a-button type="primary" @click="searchList">查询</a-button>
                <a-button style="margin-left: 18px" @click="resetList">重置</a-button>
                <a-button style="margin-left: 8px" type="primary" icon="plus" @click="handleAdd">新建</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 1500 }">
        <span slot="status" slot-scope="text">{{ text | status(sendStatusList) }}</span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="dowloadFile(record)" v-if="record.userFileUrl">导出</a>
          <a-button type="link" disabled v-else style="padding:0;border:none;">导出</a-button>
          <a-divider type="vertical" />
          <a-popconfirm title="确定取消吗?" ok-text="Yes" cancel-text="No" @confirm="handleDelete(record)" v-if="record.status == 0">
            <a href="#">取消</a>
          </a-popconfirm>
          <a-button type="link" disabled v-else style="padding:0;border:none;">取消</a-button>
        </span>
      </s-table>
    </a-card>
    <ModifyDrawer ref="modifyDrawer" @editOk="updateTable"></ModifyDrawer>
  </div>
</template>
<script>
import { STable } from '@/views/box/components'
import ModifyDrawer from './modifyDrawer.vue'
import { sendCouponList, cancelSendCoupon } from '@/api/box/setting'
import { onDownFile, timeStampDate } from '@/views/box/util/global'
const columns = [
  { title: 'ID', dataIndex: 'id', align: 'center', width: 200 },
  { title: '对外展示名称', dataIndex: 'name', align: 'center' },
  { title: '内部名称', dataIndex: 'innerName', align: 'center' },
  { title: '发放时间', dataIndex: 'sendTime', align: 'center' },
  { title: '发放类型', dataIndex: 'type', align: 'center', customRender: text => (text == 0 ? '自动发券' : '') },
  { title: '是否通知', dataIndex: 'noticeType', align: 'center', customRender: text => (text == 1 ? '短信' : '不通知') },
  // { title: '发放成功数', dataIndex: 'done', align: 'center' },
  // { title: '发放总数', dataIndex: 'total', align: 'center' },
  { title: '发放状态', dataIndex: 'status', align: 'center', scopedSlots: { customRender: 'status' } },
  { title: '创建时间', dataIndex: 'createTime', align: 'center' },
  // { title: '最后操作人', dataIndex: 'lastOperator', align: 'center' },
  { title: '操作', fixed: 'right', width: 150, align: 'center', scopedSlots: { customRender: 'action' } }
]
export default {
  components: {
    STable,
    ModifyDrawer
  },
  data() {
    return {
      columns,
      uploadParams: null,
      showEdit: false,
      // 查询条件参数
      queryParam: {
        type: '',
        status: ''
      },
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => this.fetchData(parameter),
      sendStatusList: [
        { value: 0, name: '待发放' },
        { value: 1, name: '发放中' },
        { value: 2, name: '已发放' },
        { value: 3, name: '已取消' }
      ]
    }
  },
  filters: {
    status(text, sendStatusList) {
      let list = sendStatusList.filter(e => e.value == text)
      return list.length > 0 ? list[0].name : text
    }
  },
  watch: {
    showEdit(value) {
      if (value) this.$refs.table.refresh(true)
    }
  },
  methods: {
    fetchData(parameter) {
      let params = {
        page: parameter,
        requestData: this.queryParam
      }
      return sendCouponList(params).then(res => {
        if (res.code == 0) {
          // res.data.forEach(item => {
          //   item.status = item.status == 1 ? true : false
          // })
          return {
            data: res.data,
            page: res.page
          }
        } else {
          this.$message.warning(res.msg)
          return {
            data: [],
            page: {
              pageNo: 0,
              count: 0,
              pageSize: 10
            }
          }
        }
      })
    },
    searchList() {
      this.$refs.table.refresh(true)
    },
    resetList() {
      this.queryParam = {
        type: '',
        status: ''
      }
      this.$refs.table.refresh(true)
    },
    updateTable() {
      this.$refs.table.refresh()
    },
    handleAdd() {
      this.$refs.modifyDrawer.show('add')
    },
    handleEdit(record) {
      this.$refs.modifyDrawer.show(record)
    },
    dowloadFile(record) {
      let link = record.userFileUrl
      let arr = link.split('/')
      let str = arr[arr.length - 1]
      let strArr = str.split('-')
      let hz = str.split('.')
      let timeStamp = strArr[0]
      let name = `${timeStampDate(timeStamp)}-${strArr[1]}`
      console.log(name)
      onDownFile(record.userFileUrl, name)
    },
    handleDelete(record) {
      let params = {
        requestData: { id: record.id }
      }
      cancelSendCoupon(params).then(res => {
        if (res.code == 0) {
          this.$message.success('取消成功！')
          this.updateTable()
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  }
}
</script>

